<template>
	<view>
		<uni-popup ref="popup" type="center" border-radius="10px">
			<uni-card :title="title" thumbnail="" extra="额外信息" note="Tips" style="width: 70vw;height: 70vh;">
				<template v-slot:title>
					<view class="gl-header" style="border-bottom: 2px solid #aaa;padding: 10px 0;">
						<view class="gl-header-left">
							<text>{{title}} - {{staffData?.id}}</text>
						</view>
						<view class="gl-header-right">
							<uni-icons type="closeempty" size="20" color="#fff" class="gl-button-icon" @tap="eventClose"
								style="background-color: #dd524d;padding: 2px;border-radius: 2px;"></uni-icons>
						</view>
					</view>
				</template>
				<view class="" style="width: 100%;">
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="" style="display: flex;align-items: start;gap: 10px;">
							<view
								style="display: flex;align-items: center;gap: 10px;position: relative;background-color: #aaa;border-radius: 4px;">
								<image :src="sConf.cos + (staffData?.face || '/media/default/default_0.png')"
									mode="scaleToFill"
									style="width: 40px;height: 40px;border-radius: 50% 50%;background-color: #aaa;">
								</image>
								<uni-icons type="person-filled" size="24" style="position: absolute;left: 0;bottom: 0;"
									:color="staffData?.gender === 1? '#5555ff':'#ff55ff'"></uni-icons>
							</view>
							<view class="">
								<view class="" style="display: flex;gap: 5px;">
									<text>昵称:</text>
									<text style="font-weight: bold;padding-right: 20px;"
										@click="copyReqsnOrder(staffData?.nicename)">{{staffData?.nicename}}</text>
								</view>
								<view class="" style="display: flex;gap: 5px;">
									<text>电话:</text>
									<text style="font-weight: bold;padding-right: 20px;"
										@click="copyReqsnOrder(staffData?.phone)">{{staffData?.phone}}</text>
								</view>
							</view>
							<view class="">
								<view class="" style="display: flex;gap: 5px;">
									<text>权益等级:</text>
									<text
										style="font-weight: bold;padding-right: 20px;">{{staffData?.sub_curlevel.name}}</text>
									<text class="gl-link gl-link-warning" @click="levelChange(staffData)">调整权益</text>
								</view>
								<view class="" style="display: flex;gap: 5px;">
									<text>注册时间:</text>
									<text style="font-weight: bold;padding-right: 20px;">{{staffData?.created}}</text>
								</view>
							</view>
							<view class="">
								<view class="" style="display: flex;gap: 5px;">
									<text>备注称呼:</text>
									<text
										style="font-weight: bold;padding-right: 20px;">{{staffData?.sub_desc.name}}</text>
									<text class="gl-link gl-link-warning" @click="descChange(staffData)">修改称呼</text>
								</view>
								<view class="" style="display: flex;gap: 5px;"></view>
							</view>
						</view>

						<view v-show="staffData?.sub_parent" style="display: flex;align-items: start;gap: 10px;">
							<view @click="eventNavSid(staffData?.sub_parent.id)"
								style="display: flex;align-items: center;gap: 10px;position: relative;background-color: #aaa;border-radius: 4px;">
								<image :src="sConf.cos + (staffData?.sub_parent.face || '/media/default/default_0.png')"
									mode="scaleToFill"
									style="width: 40px;height: 40px;border-radius: 50% 50%;background-color: #aaa;">
								</image>
								<uni-icons type="person-filled" size="24" style="position: absolute;left: 0;bottom: 0;"
									:color="staffData?.sub_parent.gender === 1? '#5555ff':'#ff55ff'"></uni-icons>
							</view>
							<view class="">
								<view class="" style="display: flex;gap: 5px;">
									<text>昵称:</text>
									<text
										style="font-weight: bold;padding-right: 20px;">{{staffData?.sub_parent.nicename}}</text>
								</view>
								<view class="" style="display: flex;gap: 5px;">
									<text>电话:</text>
									<text
										style="font-weight: bold;padding-right: 20px;">{{staffData?.sub_parent.phone}}</text>
								</view>
							</view>
						</view>
					</view>
					<uni-segmented-control :current="current" :values="menuData" style-type="button"
						@clickItem="onClickItem" active-color="#007aff" style="margin-top: 10px;" />

					<view class="content">
						<subEmptyCardVue v-show="current === 0"></subEmptyCardVue>
						<subVerifyCardVue ref="subVerifyCard" v-show="current === 1" :sid="curSID"></subVerifyCardVue>
						<withdrawCardVue ref="withdrawCard" v-show="current === 2" :sid="curSID"></withdrawCardVue>
						<subStaffAddressVue ref="subStaffAddress" v-show="current === 3" :sid="curSID"></subStaffAddressVue>
						<subEmptyCardVue v-show="current === 4"></subEmptyCardVue>
						<assetCardVue ref="assetCard" v-show="current === 5" :sid="curSID"></assetCardVue>
						<subEmptyCardVue v-show="current === 6"></subEmptyCardVue>
						<subEmptyCardVue v-show="current === 7"></subEmptyCardVue>
						<subStaffPartsVue ref="subStaffParts" v-show="current === 8" :sid="curSID"
							@cursid="eventNavSid">
						</subStaffPartsVue>
					</view>
				</view>
			</uni-card>
		</uni-popup>

		<!-- popup模态窗口 -->
		<popupStaffLevelVue ref="popupLevel" @reload="loadDefData"></popupStaffLevelVue>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import subEmptyCardVue from '@/components/sub-empty-card/sub-empty-card.vue';
	import assetCardVue from '@/components/sub-staff-list/asset-card.vue';
	import withdrawCardVue from '@/components/sub-staff-list/withdraw-card.vue';
	import subVerifyCardVue from '@/components/sub-staff-list/sub-verify-card.vue';
	import subStaffPartsVue from '@/components/sub-staff-list/sub-staff-parts.vue';
	import popupStaffLevelVue from './popup-staff-level.vue';
	import subStaffAddressVue from './sub-staff-address.vue';
	export default {
		data() {
			return {
				sConf: getApp().globalData,
				title: '用户详情',
				curSID: null, // 当前用户ID
				staffData: null, // 当前用户对象
				parentData: null,
				current: 0,
				menuData: ["历史订单", "实名认证", "提现申请", "收货地址", "银行卡", "我的资产", "个人业绩", "团队业绩", "团队成员"]
			}
		},
		components: {
			subEmptyCardVue,
			subVerifyCardVue,
			assetCardVue,
			withdrawCardVue,
			popupStaffLevelVue,
			subStaffPartsVue,
			subStaffAddressVue
		},
		methods: {
			/**
			 * 复制订单号
			 */
			copyReqsnOrder(e) {
				uni.setClipboardData({
					data: e
				})
			},
			open(e) {
				console.log('open', e);
				this.curSID = e
				this.loadDefData()
				this.$refs.popup.open()
			},
			eventClose() {
				this.$refs.popup.close()
			},
			async loadDefData() {
				await this.loadStaffInfo(this.curSID).then(res => {
					console.log('加载用户对象', res);
					this.staffData = res.resmsg
				})
				this.onLoadItem(this.current)
			},
			/**
			 * 切换目标用户
			 */
			eventNavSid(e) {
				console.log('eventNavSid', e);
				this.open(e)
			},
			/**
			 * 权益
			 */
			levelChange(e) {
				console.log('levelChange', e);
				this.$refs.popupLevel.open(e)
			},
			/**
			 * 修改备注名
			 */
			descChange(e) {
				console.log('descChange', e);
				console.log(this.sConf);
				let that = this
				let tk = this.sConf.auth.token
				let data = {
					sid: this.sConf.auth.attrs.id,
					child: e.id
				}
				uni.showModal({
					title: '修改备注称呼',
					placeholderText: '新的别称',
					editable: true,
					success(r) {
						if (r.confirm && r.content) {
							console.log(r.content);
							data['name'] = r.content
							psMethod.syncAuthenticatorRequest('/admin/staffDesc/', 'POST', tk, data).then(res => {
								uni.showToast({
									title: '提交成功',
									success() {
										that.loadDefData()
									}
								})
							})
						}
					}
				})
			},
			/**
			 * 分段器事件-自动
			 */
			onLoadItem(e) {
				console.log('onLoadItem', e);
				if (e === 1) {
					this.$refs.subVerifyCard.open(this.curSID)
				}
				if (e === 2) {
					this.$refs.withdrawCard.open(this.curSID)
				}
				if (e === 3) {
					this.$refs.subStaffAddress.open(this.curSID)
				}
				if (e === 5) {
					this.$refs.assetCard.open(this.curSID)
				}
				if (e === 8) {
					this.$refs.subStaffParts.open(this.curSID)
				}
			},
			/**
			 * 分段器事件-手动
			 */
			onClickItem(e) {
				console.log('onClickItem', e);
				this.onLoadItem(e.currentIndex)
				this.current = e.currentIndex
			},
			loadParentData() {
				let host = this.sConf.host + '/admin/treeStaff/'
				let token = this.sConf.auth.token
				let data = {
					'page': this.page,
					'size': this.size,
					'sid': this.curSID,
				};
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中'
					})
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			loadStaffInfo(e) {
				let host = this.sConf.host + '/admin/staff/' + e + '/';
				let token = this.sConf.auth.token || '';
				return new Promise((resolve, reject) => {
					psMethod.authenticatorGetSync(host, token).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.glLineLeft {
		border-left: 1px solid #007aff;
	}

	.gl-control-item {
		padding: 4px 0;
		width: 80px;
		text-align: center;
	}
</style>